<template>
	<div>
		<div style="margin: 10px 0">
			<el-input style="width: 200px" placeholder="请输入用户ID" suffix-icon="el-icon-search"
				v-model="userId"></el-input>
			<el-input style="width: 200px" placeholder="请输入IP地址" suffix-icon="el-icon-message" class="ml-5"
				v-model="ip"></el-input>
			<el-input style="width: 200px" placeholder="请输入描述" suffix-icon="el-icon-position" class="ml-5"
				v-model="description"></el-input>
			<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
			<el-button type="warning" @click="reset">重置</el-button>
		</div>

		<el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">
			<el-table-column prop="id" label="ID" width="80"></el-table-column>
			<el-table-column prop="userId" label="用户ID" width="140"></el-table-column>
			<el-table-column prop="ip" label="IP地址"></el-table-column>
			<el-table-column prop="description" label="描述"></el-table-column>
			<el-table-column prop="listenTime" label="监听时间"></el-table-column>
		</el-table>

		<div style="padding: 10px 0">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Listen",
		data() {
			return {
				tableData: [],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				userId: "",
				ip: "",
				description: "",
				webSocket: null
			}
		},
		created() {
			this.initWebSocket();
		},
		beforeDestroy() {
			// 组件销毁前关闭WebSocket连接
			if (this.webSocket) {
				this.webSocket.close();
			}
		},
		methods: {
			initWebSocket() {
				// 创建WebSocket连接

				// const wsUri = "ws://localhost:9191/ws/users"; // 根据实际情况修改地址
				const user = localStorage.getItem("user") ?
					JSON.parse(localStorage.getItem("user")) :
					null;

				// 构造带Token的WS连接地址
				const wsUri = user ?
					`ws://localhost:9191/ws/users?token=${encodeURIComponent(user.token)}` :
					"ws://localhost:9191/ws/users";
				this.webSocket = new WebSocket(wsUri);

				this.webSocket.onopen = () => {
					console.log("WebSocket连接成功");
					// 请求第一页数据
					this.requestPageData();
				};

				this.webSocket.onmessage = (event) => {
					console.log("收到消息:", event.data);
					try {
						const data = JSON.parse(event.data);
						this.tableData = data.data;
						this.total = data.total;
						this.pageNum = data.pageNum;
						this.pageSize = data.pageSize;
					} catch (e) {
						console.error("解析数据失败:", e);
					}
				};

				this.webSocket.onerror = (error) => {
					console.error("WebSocket错误:", error);
				};

				this.webSocket.onclose = () => {
					console.log("WebSocket连接已关闭");
				};
			},
			requestPageData() {
				// 请求特定页的数据
				if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
					const message = `getPage:${this.pageNum}:${this.pageSize}`;
					this.webSocket.send(message);
				}
			},
			load() {
				// 搜索功能 - 这里通过WebSocket请求数据
				this.pageNum = 1;
				this.requestPageData();
			},
			reset() {
				this.userId = "";
				this.ip = "";
				this.description = "";
				this.pageNum = 1;
				this.requestPageData();
			},
			handleSizeChange(pageSize) {
				console.log("页面大小改变:", pageSize);
				this.pageSize = pageSize;
				this.requestPageData();
			},
			handleCurrentChange(pageNum) {
				console.log("当前页改变:", pageNum);
				this.pageNum = pageNum;
				this.requestPageData();
			}
		}
	}
</script>

<style scoped>
	.ml-5 {
		margin-left: 5px;
	}
</style>